<template>
  <div>
    <div>
      <h4>ADL能力评定</h4>
      <el-row type="flex" justify="space-between">
        <el-col :span="6">
            <el-button style="pointer-events: auto" type="primary" @click="openDialog">填写《Barthel指数评定量表》</el-button>
        </el-col>
        <el-col :span="3">
            <el-input v-model="pgForm.barthel_input1" placeholder="" readonly style="width: 70%;"></el-input>
            <span> 分</span>
        </el-col>
        <el-col :span="10">
          <div>
            <el-input v-model="pgForm.barthel_input2" placeholder="" readonly></el-input>
          </div>
        </el-col>
      </el-row>
    </div>

    <el-dialog
      title="Barthel指数评估量表"
      :visible.sync="barthel_dialogVisible"
      append-to-body
      width="50%"
      close-on-click-modal>
      <h1 class="barthel-title">Barthel指数评定量表</h1>
      <div class="one">
        <div class="eat">
          1、进食
        </div>
        <div class="list1">
          <el-radio-group v-model.number="pgForm.barthel_radio1" class="el-radio-group">
            <el-radio label="'10分 自己在合理的时间内(约10秒钟吃一口)可用筷子取食眼前的食物。若需辅具时，应会自行穿脱。'" class="el-radio1">10分 自己在合理的时间内(约10秒钟吃一口)可用筷子取食眼前的食物。若需辅具时，应会自行穿脱。</el-radio>
            <br>
            <el-radio label="'5分 需部分帮助(切面包、抹黄油、夹菜、盛饭等)。'" class="el-radio1">5分 需部分帮助(切面包、抹黄油、夹菜、盛饭等)。</el-radio>
            <br>
            <el-radio label="'0分 依赖。'" class="el-radio1">0分 依赖。</el-radio>
            <br>
          </el-radio-group>
        </div>
      </div>
      <div class="two">
        <div class="transfer">
          2、转移
        </div>
        <div class="list2">
          <el-radio-group v-model.number="pgForm.barthel_radio2" class="el-radio-group">
            <el-radio label="'15分 自理。'" class="el-radio1">15分 自理。</el-radio>
            <br>
            <el-radio label="'10分 需要少量帮助(1人)或语言指导。'" class="el-radio1">10分 需要少量帮助(1人)或语言指导。</el-radio>
            <br>
            <el-radio label="'5分 需两人或1个强壮、动作娴熟的人帮助。'" class="el-radio1">5分 需两人或1个强壮、动作娴熟的人帮助。</el-radio>
            <br>
            <el-radio label="'0分 完全依赖别人。'" class="el-radio1">0分 完全依赖别人。</el-radio>
          </el-radio-group>
        </div>
      </div>
      <div class="three">
        <div class="decoration">
          3、修饰
        </div>
        <div class="list3">
          <el-radio-group v-model.number="pgForm.barthel_radio3" class="el-radio-group">
            <el-radio label="'5分 可独立完成洗脸、洗手、刷牙及梳头。'" class="el-radio1">5分 可独立完成洗脸、洗手、刷牙及梳头。</el-radio>
            <br>
            <el-radio label="'0分 需要别人帮忙。'" class="el-radio1">0分 需要别人帮忙。</el-radio>
            <br>
          </el-radio-group>
        </div>
      </div>
      <div class="four">
        <div class="wc">
          4、上厕所
        </div>
        <div class="list4">
          <el-radio-group v-model.number="pgForm.barthel_radio4" class="el-radio-group">
            <el-radio label="'10分 可自行进出厕所，并能穿好衣服。使用便盆者，可自行清理便盆。'" class="el-radio1">10分 可自行进出厕所，并能穿好衣服。使用便盆者，可自行清理便盆。</el-radio>
            <br>
            <el-radio label="'5分 需帮忙保持姿勢的平衡，整理衣物或使用卫生紙。使用便盆者，可自行取放便盆，但须仰赖他人清理。'" class="el-radio1">5分 需帮忙保持姿勢的平衡，整理衣物或使用卫生紙。使用便盆者，可自行取放便盆，但须仰赖他人清理。</el-radio>
            <br>
            <el-radio label="'0分 需他人帮忙。'" class="el-radio1">0分 需他人帮忙。</el-radio>
            <br>
          </el-radio-group>
        </div>
      </div>
      <div class="five">
        <div class="take-shower">
          5、洗澡
        </div>
        <div class="list5">
          <el-radio-group v-model.number="pgForm.barthel_radio5" class="el-radio-group">
            <el-radio label="'5分 可独立完成（不论是盆浴或淋浴）。'" class="el-radio1">5分 可独立完成（不论是盆浴或淋浴）。</el-radio>
            <br>
            <el-radio label="'0分 需別人帮忙。'" class="el-radio1">0分 需別人帮忙。</el-radio>
            <br>
          </el-radio-group>
        </div>
      </div>
      <div class="six">
        <div class="walk">
          6、行走（平地45m）
        </div>
        <div class="list6">
          <el-radio-group v-model.number="pgForm.barthel_radio6" class="el-radio-group">
            <el-radio label="'15分 使用或不使用辅具皆可独立行走50公尺以上。'" class="el-radio1">15分 使用或不使用辅具皆可独立行走50公尺以上。</el-radio>
            <br>
            <el-radio label="'10分 需要稍微的扶持或口头指导方可行走50公尺以上。'" class="el-radio1">10分 需要稍微的扶持或口头指导方可行走50公尺以上。</el-radio>
            <br>
            <el-radio label="'5分 虽无法行走，但可独立操纵轮椅（包括转弯、进门、及接近桌子、床沿）并可推行轮椅50公尺以上。'" class="el-radio1">5分 虽无法行走，但可独立操纵轮椅（包括转弯、进门、及接近桌子、床沿）并可推行轮椅50公尺以上。</el-radio>
            <br>
            <el-radio label="'0分 需別人帮忙。'" class="el-radio1">0分 需別人帮忙。</el-radio>
            <br>
          </el-radio-group>
        </div>
      </div>
      <div class="seven">
        <div class="stairs">
          7、上下楼梯
        </div>
        <div class="list7">
          <el-radio-group v-model.number="pgForm.barthel_radio7" class="el-radio-group">
            <el-radio label="'10分 可自行上下楼梯（允许抓扶手、用拐杖）。'" class="el-radio1">10分 可自行上下楼梯（允许抓扶手、用拐杖）。</el-radio>
            <br>
            <el-radio label="'5分 需要稍微帮忙或口头指导。'" class="el-radio1">5分 需要稍微帮忙或口头指导。</el-radio>
            <br>
            <el-radio label="'0分 无法上下楼梯。'" class="el-radio1">0分 无法上下楼梯。</el-radio>
            <br>
          </el-radio-group>
        </div>
      </div>
      <div class="eight">
        <div class="clothes">
          8、穿脱衣服
        </div>
        <div class="list8">
          <el-radio-group v-model.number="pgForm.barthel_radio8" class="el-radio-group">
            <el-radio label="'10分 可自行穿脫衣服、鞋子及辅具。'" class="el-radio1">10分 可自行穿脫衣服、鞋子及辅具。</el-radio>
            <br>
            <el-radio label="'5分 在別人帮忙下、可自行完成一半以上的动作。'" class="el-radio1">5分 在別人帮忙下、可自行完成一半以上的动作。</el-radio>
            <br>
            <el-radio label="'0分 需別人帮忙。'" class="el-radio1">0分 需別人帮忙。</el-radio>
            <br>
          </el-radio-group>
        </div>
      </div>
      <div class="nine">
        <div class="shit">
          9、大便控制
        </div>
        <div class="list9">
          <el-radio-group v-model.number="pgForm.barthel_radio9" class="el-radio-group">
            <el-radio label="'10分 能控制。'" class="el-radio1">10分 能控制。</el-radio>
            <br>
            <el-radio label="'5分 偶尔失禁（每周＜1次）。'" class="el-radio1">5分 偶尔失禁（每周＜1次）。</el-radio>
            <br>
            <el-radio label="'0分 失禁或昏迷。'" class="el-radio1">0分 失禁或昏迷。</el-radio>
            <br>
          </el-radio-group>
        </div>
      </div>
      <div class="ten">
        <div class="urine">
          10、小便控制
        </div>
        <div class="list10">
          <el-radio-group v-model.number="pgForm.barthel_radio10" class="el-radio-group">
            <el-radio label="'10分 能控制。'" class="el-radio1">10分 能控制。</el-radio>
            <br>
            <el-radio label="'5分 偶尔失禁（每周＜1次）或尿急（无法等待便盆或无法即时赶到厕所）或需別人帮忙处理。'" class="el-radio1">5分 偶尔失禁（每周＜1次）或尿急（无法等待便盆或无法即时赶到厕所）或需別人帮忙处理。</el-radio>
            <br>
            <el-radio label="'0分 失禁、昏迷或需要他人导尿。'" class="el-radio1">0分 失禁、昏迷或需要他人导尿。</el-radio>
            <br>
          </el-radio-group>
        </div>
      </div>

      <div class="lastDiv">
        <span>总分 </span>
        <el-input v-model="pgForm.barthel_input1" readonly style="width: 10%;margin-right: 100px"></el-input>
        <el-dropdown class="word" trigger="click" @command="handleCommand" v-if="$route.path == '/patient/assess/detail/'">
          <el-button type="primary">
            输出文档<i class="el-icon-arrow-down el-icon--right"></i>
          </el-button>
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item command="pdf">PDF</el-dropdown-item>
            <el-dropdown-item command="docx">Word</el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
      </div>
<!--      <span slot="footer" class="dialog-footer">
        <el-button @click="closeDialog">取 消</el-button>
        <el-button type="primary" @click="confirmCloseDialog">确 定</el-button>
      </span>-->
    </el-dialog>
  </div>
</template>

<script>
import {sendJumpPdfData, sendJumpWordData} from "@/api/gaoxin/word";

export default {
  name: "barthel",
  title: "Barthel指数评估量表",
  created() {
    if(this.istrans){
      this.pgForm=this.fromdata
    }
  },
  props: {
    fromdata:Object,
    istrans:false,
  },
  data() {
    return {
      barthel_dialogVisible: false,
      pgForm: {
        barthel_radio1: '',
        barthel_radio2: '',
        barthel_radio3: '',
        barthel_radio4: '',
        barthel_radio5: '',
        barthel_radio6: '',
        barthel_radio7: '',
        barthel_radio8: '',
        barthel_radio9: '',
        barthel_radio10: '',
        barthel_input1: 0,
        barthel_input2: '',
      }
    }
  },
  computed:{
    sum() {
      return (this.pgForm.barthel_radio1.split('分')[0].slice(1))*1+(this.pgForm.barthel_radio2.split('分')[0].slice(1))*1+(this.pgForm.barthel_radio3.split('分')[0].slice(1))*1+(this.pgForm.barthel_radio4.split('分')[0].slice(1))*1+(this.pgForm.barthel_radio5.split('分')[0].slice(1))*1+(this.pgForm.barthel_radio6.split('分')[0].slice(1))*1+(this.pgForm.barthel_radio7.split('分')[0].slice(1))*1+(this.pgForm.barthel_radio8.split('分')[0].slice(1))*1+(this.pgForm.barthel_radio9.split('分')[0].slice(1))*1+(this.pgForm.barthel_radio10.split('分')[0].slice(1))*1
    },
    taskId() {
      return this.$route.query.taskId;
    }
  },
  watch: {
    sum(val){
      if (this.$route.path != "/patient/assess/detail/") {
        this.pgForm.barthel_input1 = val
      }
    },
    "pgForm.barthel_input1"(val) {
      if (this.pgForm.barthel_input1 >= 0 & this.pgForm.barthel_input1 <= 20) {
        this.pgForm.barthel_input2 = '评定结果：完全残疾，日常生活完全依赖。'
      }
      else if (this.pgForm.barthel_input1 >= 21 & this.pgForm.barthel_input1 <= 40) {
        this.pgForm.barthel_input2 = '评定结果：重度残疾，日常生活明显依赖。'
      }
      else if (this.pgForm.barthel_input1 >= 41 & this.pgForm.barthel_input1 <= 60) {
        this.pgForm.barthel_input2 = '评定结果：中度残疾，日常生活需要帮助。'
      }
      else if (this.pgForm.barthel_input1 > 60 & this.pgForm.barthel_input1 < 100) {
        this.pgForm.barthel_input2 = '评定结果：良，生活基本自理。'
      }
      else {
        this.pgForm.barthel_input2 = '评定结果：无障碍。'
      }
    },
    "pgForm.barthel_radio1"(val) {
      console.log(+val.split('分')[0].slice(1))
    }
  },
  methods: {
    //el-dialog组件 打开回调
    openDialog() {
      this.barthel_dialogVisible = true;
    },
    //elementui dropdown 组件方法
    handleCommand(command) {
      this.sendData(command);
    },
    //跳转表 word pdf 下载
    sendData(type) {
      const loading = this.$loading({
        lock: true,
        text: '努力输出中...',
        spinner: 'el-icon-loading',
        background: 'rgba(0, 0, 0, 0.7)'
      });
      if (type == 'docx') {
        sendJumpWordData({ taskId: this.taskId, jumpTableName: this.$options.name + "Jump" }).then(response => {
          if(response) {
            loading.close();
            this.$message({
              message: 'word文档输出成功！',
              type: 'success'
            });
          };
          const data = response;
          let url = window.URL.createObjectURL(data);   // 将二进制文件转化为可访问的url
          var a = document.createElement('a');
          document.body.appendChild(a);
          a.href = url;
          a.download = this.taskDate.assessName + '.docx';
          a.click();   // 模拟点击下载
          window.URL.revokeObjectURL(url);
        });
      }
      else {
        sendJumpPdfData({ taskId: this.taskId }).then(response => {
          if(response) {
            loading.close();
            this.$message({
              message: 'pdf文档输出成功！',
              type: 'success'
            });
          };
          const data = response;
          let url = window.URL.createObjectURL(data);   // 将二进制文件转化为可访问的url
          var a = document.createElement('a');
          document.body.appendChild(a);
          a.href = url;
          a.download = this.taskDate.assessName + '.pdf';
          a.click();   // 模拟点击下载
          window.URL.revokeObjectURL(url);
        });
      }
    },
  },
}
</script>

<style scoped>
div,h4,span,ul {
  list-style: none;
  box-sizing: border-box;
}

.el-row{
  margin: 10px 0;
  padding: 20px 20px;
  background-color: #f9f9f9;
  flex-wrap: wrap;
  flex-direction: row;
}

.barthel-title {
  height: 30px;
  border-bottom: 2px solid #e5dede;
}

.one, .two, .three, .four, .five, .six, .seven, .eight, .nine, .ten {
  margin-top: 25px;
}

.one .eat, .two .transfer, .three .decoration, .four .wc, .five .take-shower, .six .walk, .seven .stairs, .eight .clothes, .nine .shit, .ten .urine {
  border-radius: 5px;
  padding: 10px 15px;
  background-color: #f7f7fb;
}

.el-radio1, .el-radio2, .el-radio3, .el-radio4 {
  margin-top: 20px;
}
.el-radio1{
  margin-left: 5px;
}
.sum {
  background-color: #f7f7fb;
}

.sum span:first-child {
  margin-left: 20px;
}

.sum span:last-child {
  color: #fff;

  border-radius: 5px;
  margin-left: 40px;
  background-color: #008b90;
}
.lastDiv {
  margin-top: 50px;
}
.lastDiv /deep/.el-input__inner{
  color: #fff;
  text-align: center;
  background-color: #008b90;
}
</style>
